<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        x:{{x}}<br>
        y:{{y}}

        <script type="module">
            import {createApp,reactive,onMounted,onUnmounted,toRefs} from './node_modules/vue/dist/vue.esm-browser.js'
            
            function useMousePosition(){
                const position = reactive({
                        x:0,
                        y:0
                    })

                    const update = e => {
                        position.x = e.pageX
                        position.y = e.pageY
                    }

                    onMounted(()=>{
                        window.addEventListener("mousemove",update)
                    })

                    onUnmounted(()=>{
                        window.removeEventListener("mousemove",update)
                    })

                    return toRefs(position)
                    
            }
            
            const app = createApp({
                setup(){

                    //第一个参数 props
                    //第二个参数 context：attrs、emit、slots
                    const {x,y} = useMousePosition()

                    return {
                        x,
                        y
                    }
                }
            })

            console.log(app)
            app.mount('#app')
        
        </script>
    </div>
</body>
</html>